<template>
  <div class="main">
    <div class="content">
      <span class="input-title" :title="showVal">{{ showVal }}</span>
      <Icon
        size="20"
        type="ios-book-outline"
        slot="suffix"
        @click="openEditor"
      />
    </div>

    <o-dialog-box
      v-model="visible"
      width="800"
      @on-ok="onOK"
      :cancelText="$srv.getI18nByValue('取消编辑')"
      :okText="$srv.getI18nByValue('确认')"
    >
      <ckeditor
        id="editor"
        slot="content"
        :editor="editor"
        :disabled="true"
        v-model="G_value"
        :config="editorConfig"
      ></ckeditor>
    </o-dialog-box>
  </div>
</template>

<script lang="ts">
import { T_srv, Tsrv, ifs, ts, tvs, vue } from '@/services';
import CKEditor from '@ckeditor/ckeditor5-vue2';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { N_input } from '@/types';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh';
import '@ckeditor/ckeditor5-build-classic/build/translations/en-au';

vue.use(CKEditor);
@T_srv.comp({
  components: {}
})
export default class oRichTextCell extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop() renderOpts: N_input.I_renderOpts;

  @T_srv.prop() params: any;

  /* 组件名 */
  private name: string = 'oRichTextCell';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  /* 遮罩 */
  public isMask: boolean = false;

  public G_value: string = '';

  public showVal: string = '';

  public editor = ClassicEditor;

  public visible: boolean = false;

  public editorConfig = {
    title: Tsrv.getI18nByValue('编辑器'),
    language:
      this.$i18n.locale === 'zh-CN'
        ? 'zh-cn'
        : this.$i18n.locale === 'zh-TW'
        ? 'zh'
        : 'en-au'
  };

  private G_paramsFromComp: 'oBaseGrid' | 'oBaseForm' = null;

  private isView: boolean = false;

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.init();
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  public resetValue(): void {
    this.setValue(null);
  }

  public setValue(val: string): void {
    if (Tsrv.utils.noValue(val)) {
      this.G_value = '';
    }
    this.setShowVal();
  }

  private init() {
    // if (this.renderOpts.props.getTcommand()?.oBaseGrid?.G_compName) {
    //   this.G_paramsFromComp = 'oBaseGrid';
    // } else if (this.renderOpts.props.getTcommand()?.oBaseForm?.G_compName) {
    //   this.G_paramsFromComp = 'oBaseForm';
    // } else {
    //   this.$msg({});
    //   console.error('未定义的组件');
    // }
    this.G_paramsFromComp = this.renderOpts.props.getTcommand()?.compName;
    if (Tsrv.noValue(this.G_paramsFromComp)) {
      this.$msg(Tsrv.getI18nByValue('未定义的组件'));
      console.error('未定义的组件');
    }
    if (!Tsrv.utils.noValue(this.params.row[this.params.column.field])) {
      const v = JSON.parse(this.params.row[this.params.column.field]);
      this.G_value = Tsrv.utils.decompressString(v.content);
    }
    if (this.G_paramsFromComp === 'oBaseGrid') {
      this.isView = this.renderOpts.props.getTcommand().editorStatus === 'none';
    }

    this.setShowVal();
  }

  public setShowVal() {
    if (!Tsrv.utils.noValue(this.G_value)) {
      const s = this.G_value.replace(/<[^>]+>/g, '')
        .replace(/&nbsp;/g, '')
        .substring(0, 20);
      if (s.length > 0) {
        this.showVal = `${s}...`;
      }
      this.showVal = s;
    }
  }

  public openEditor() {
    if (this.isView) {
      this.visible = true;
    }
  }

  public onOK() {}
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;

  .input-title {
    overflow: hidden;
    margin-right: 5px;
  }
}
.editor-container {
  padding: 6px;
  position: absolute;
  width: 200px;
  height: 100px;
  top: 0;
  left: 0;
}
</style>
